<template>
  <div class="container-content">
    <el-form
      ref="formRef"
      :model="kingBomEntity"
      label-width="90px"
      label-position="left"
    >
      <el-card shadow="never" class="mt20">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="BOM版本">
              <el-input
                v-model="kingBomEntity.kingBomEntity.bomVersion"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="BOM简称">
              <el-input v-model="kingBomEntity.kingBomEntity.bomAs" disabled> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据类型">
              <el-select
                v-model="kingBomEntity.kingBomEntity.docTypeCode"
                placeholder="BOM分类"
                style="width: 100%"
                suffix-icon="el-icon-search"
                disabled
              >
                <el-option label="物料清单" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父项物料编码">
              <el-input
                v-model="kingBomEntity.kingBomEntity.parentMaterialCode"
                suffix-icon="el-icon-search"
               disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父项物料单位">
              <el-input
                v-model="kingBomEntity.kingBomEntity.parentMaterialName"
                suffix-icon="el-icon-search"
               disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="BOM分类">
              <el-select
                v-model="kingBomEntity.kingBomEntity.bomClassify"
                placeholder="BOM分类"
                style="width: 100%"
                suffix-icon="el-icon-search"
                disabled
              >
                <el-option label="标准BOM" value="1"></el-option>
                <el-option label="配置BOM" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="BOM用途">
              <el-select
                v-model="kingBomEntity.kingBomEntity.bomUseTo"
                placeholder="BOM用途"
                style="width: 100%"
                suffix-icon="el-icon-search"
                disabled
              >
                <el-option label="通用" value="99"></el-option>
                <el-option label="自制" value="2"></el-option>
                <el-option label="委外" value="3"></el-option>
                <el-option label="组装" value="4"></el-option>
                <el-option label="报价" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="BOM分组">
              <el-input
                v-model="kingBomEntity.kingBomEntity.bomGroup"
                suffix-icon="el-icon-search"
                @focus="openList('BOM分组')"
              >
              </el-input>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input
                v-model="kingBomEntity.kingBomEntity.bomDesc"
                type="textarea"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <div class="desc-title">BOM清单</div>
      <el-table
        :data="kingBomEntity.kingBomDetailEntities"
        style="width: 100%"
        highlight-current-row
        border
        :key="flag"
      >
        <template #empty
          ><el-button plain type="primary" round @click="addNewRow"
            >添加新行</el-button
          ></template
        >
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              plain
              icon="el-icon-plus"
              size="small"
              @click="handleDataAdd(scope.$index, scope.row)"
              disabled
            ></el-button>
            <el-button
              plain
              icon="el-icon-minus"
              size="small"
              @click="handleDataDelete(scope.$index, scope.row)"
              disabled
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="次项" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehouseId" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项物料编码" width="100" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0px" style="margin: 0">
              <el-input
                v-model="scope.row.childMaterialCode"
                disabled
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="子项物料名称" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.childMaterialName" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项规格型号" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxPrice" disabled></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="子项物料属性" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxRate" disabled></el-input>
          </template>
        </el-table-column> -->
        <el-table-column label="供应类型" width="100" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.supplyType" disabled>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="子项类型" width="100" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.childType"  disabled>
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
               
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="子项单位"
          prop="childUnitCode"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.childUnitCode" disabled>
             
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="用量类型" width="100" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.taxMoney" disabled>
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="用量:分子" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.usageNumerator" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="用量:分母" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.usageDenominator" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="固定损耗" width="100" align="center" disabled>
          <template slot-scope="scope">
            <el-input v-model="scope.row.fixedLoss" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="变动损耗率%" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varLossRate" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="供应组织" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.supplyDeptCode" disabled ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项BOM版本" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.childBomVersion" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项产品模型" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxMoney" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发料组织" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sendDeptCode" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="默认发料仓库" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sendWarehouseName" disabled>
              
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="生效日期" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ramarks" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发料方式" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ramarks" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="净需求比例" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ramarks" disabled></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import {
  updataKingBomList,
} from "@/api/bim/bim";
export default {
    props:['listid'],
  data() {
    return {
      options: [
        {
          label: "采购",
          value: "C",
        },
        {
          label: "自制",
          value: "Z",
        },
        {
          label: "委外",
          value: "W",
        },
      ],
      options1: [
        {
          label: "标准件",
          value: "1",
        },
        {
          label: "返还件",
          value: "2",
        },
        {
          label: "替代件",
          value: "3",
        },
      ],
      options2: [
        {
          label: "固定",
          value: "1",
        },
        {
          label: "变动",
          value: "2",
        },
        {
          label: "阶梯",
          value: "3",
        },
      ],
      dialogTableVisible: false,
      title: "",
      list: true,
      num: 0,
      count: 0,
      flag: 0,
      kingBomEntity: {
        kingBomDetailEntities: [],
        kingBomEntity: {
         
        },
      },
      dataList: [],
      gridData: [],
    };
  },
  methods: {
    handleDataAdd() {
      if (this.kingBomEntity.kingBomDetailEntities == undefined) {
        this.kingBomEntity.kingBomDetailEntities = [];
      }
      let outher = {
        bomId: "",
        childBomVersion: "",
        childMaterialCode: "",
        childMaterialName: "",
        childType: "",
        childUnitCode: "",
        createBy: "",
        createTime: "",
        fixedLoss: "",
        id: "",
        pageNo: 0,
        pageSize: 0,
        params: {},
        remark: "",
        remarks: "",
        searchValue: "",
        sendDeptCode: "",
        sendWarehouseCode: "",
        supplyDeptCode: "",
        supplyType: "",
        updateBy: "",
        updateTime: "",
        usageDenominator: "",
        usageNumerator: "",
        usageType: "",
        varLossRate: "",
      };
      this.kingBomEntity.kingBomDetailEntities.push(outher);
    },
  
    addNewRow() {
      this.handleDataAdd();
    },

  },
  created() {
    this.selectProject();
    // console.log(this.listid);
   updataKingBomList(this.listid).then((res)=>{
    if (res.code==200) {
        this.kingBomEntity=res.data
    }
   })
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
.el-icon-search {
  margin-top: 70% !important;
}
</style>
